.comment{
    &-item{
        position: relative;
        display: flex;      
        padding-bottom: 14px;
         margin-top: 21px;
        &::after{
            content: '';
            position: absolute;
            left: -50%;
            top: -50%;
            right: -50%;
            bottom: -50%;
            border: {
                style: solid;
                width: 0 0 1px;
                color: #e7e7e7;
                radius: 0;
            }
            box-sizing: border-box;
            pointer-events: none;
            transform: scale(.5);
	    }
    }
    &-avatar{
      width: 36px;
      height: 36px;
    }
    &-content{
      flex: 1;
      margin-left: 15px;
    }
    &-head{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    &-name{
      display: block;
      font-size: 13px;
    }
    &-time, &-like{
      font-size: 12px;
      color: $color-text-secondary;
    }
    &-body{
      font-size: 13px;
      color: $color-text-primary;
      margin-top: 9px;
      white-space: pre-line;
    }
    &-reply{
      margin-top: 9px;
      padding: 10px;
      background-color: $color-grey;
      color: $color-text-primary;
      border-radius: 4px;
      :global(p) {
        margin: 6px 0 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        :global(.link){
          color: #409EFF;
        }
        :global(.link),:global(.content){
          vertical-align: middle;
          word-break: break-all;
        }
      }
    }
  }
  :global(.vip){
    color: $theme-color;
  }
  :global(.level){
    vertical-align: middle;
    &0,&1{
      color: #bfbfbf;
    }
    &2{
      color: #95ddb2;
    }
    &3{
      color: #92d175;
    }
    &4{
      color: #ff837c;
    }
    &5{
      color: #ff6c00;
    }
    &6{
      color: #f00;
    }
    :global(.fa) {
      font-size: 20px;
    }
  }